<template>
  <div class="app_content">
    <el-card>
      <el-form ref="msgForm" label-position="top" label-width="80px" :model="formLabelAlign" :rules="formRule">
        <el-form-item label="您的姓名" prop="name">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <!-- <el-form-item label="留言封面" prop="content">
          <el-input v-model="formLabelAlign.content" @keyup.enter.native="submitForm('msgForm')"></el-input>
        </el-form-item> -->
        <el-form-item label="留言标题" prop="title">
          <el-input v-model="formLabelAlign.title" @keyup.enter.native="submitForm('msgForm')"></el-input>
        </el-form-item>
        <el-form-item label="留言内容" prop="">
          <Quill ref="quill" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('msgForm')">提交留言</el-button>
          <el-button @click="resetForm('msgForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Quill from '@/views/common/Quill.vue'
import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
import { MsgAdd } from '@/api/index.js'
export default {
  name: 'work',
  components: {
    Quill,
  },
  setup() {
    const { proxy } = getCurrentInstance()
    const msgForm = ref()
    const quill = ref()
    const state = reactive({
      formLabelAlign: {
        name: '',
        title:'',
        content: '',
      },
      formRule: {
        name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
        title: [{ required: true, message: '请填写标题', trigger: 'blur' }],
      },
    })

    const resetForm = (formName) => {
      proxy.$refs[formName].resetFields();
    }


    const submitForm =  () => {

      const quillHtml = proxy.$refs.quill.getContent()

       msgForm.value.validate((valid) => {
        if (!valid) {
          proxy.$message.warning('请输入有效信息')
          return
        }

        MsgAdd({
          name: state.formLabelAlign.name,
          title: state.formLabelAlign.title,
          content: quillHtml,
        }).then((res) => {
          if (res.code == 200) {
            proxy.$message({ message: res.msg, type: 'success', duration: 1000 })
            setTimeout(() => {
              state.formLabelAlign.name = ''
              state.formLabelAlign.title = ''
              state.formLabelAlign.content = ''
            }, 1000)
          } else {
            proxy.$message.error(res.msg)
          }
        }).catch(err=>{
          throw err
        })
      })
    }
    
    return {
      ...toRefs(state),
      resetForm,
      submitForm,
      msgForm,
      quill
    }
  },
}
</script>

<style>
</style>